const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
const { entry, port, distPath } = process.env

module.exports = {
  devServer: {
    open: false, // 编译后自动打开
    inline: true, // 保存代码刷新页面
    host: 'localhost',
    port, // 端口
    https: false, // 启用https
    proxy: { // 配置跨域
      '/api': {
        target: 'https://open.ahapocket.cn/api',
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      },
    }
  },
  publicPath: './',
  outputDir: distPath,
  assetsDir: '', // 打包的静态文件目录
  filenameHashing: true, // 使用hash命名
  productionSourceMap: false, // 不需要生产环境的 source map
  lintOnSave: 'warning', // eslint警告会在编译输出
  configureWebpack: (config) => { // 打包忽略文件
    const plugins = []

    /* 生产环境 */
    if (isProduction) {
      /* 去除注释 */
      plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false, // 去掉注释
          },
          warnings: false,
          compress: {
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ['console.log']// 移除console
          }
        }
      }))
      /* gzip压缩 */
      plugins.push(new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.json$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8, // 压缩比
        deleteOriginalAssets: false, // 是否删除源文件
      }))
      /* 取消webpack警告的性能提示 */
      config.performance = {
        hints: 'warning',
        // 入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        // 生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        // 只给出 js 文件的性能提示
        assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js')
        }
      }
    }
    /* cdn不打包 */
    config.externals = JSON.parse(process.env.externals)
    return { plugins }
  },
  chainWebpack: (config) => {
    /* 别名配置，set第一个参数：设置的别名，第二个参数：设置的路径 */
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set(`@${ entry }`, path.join(__dirname, `src/entry/${ entry }`))

    if (isProduction) {
      /* webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete */
      config.optimization.delete('splitChunks')

      /* 压缩图片 */
      config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
    }
  },
  css: {
    loaderOptions: {
      sass: { // 全局scss注入
        prependData: `
          @import "@/styles/common.scss";
          @import "@${ entry }/styles/common.scss";
        `
      }
    }
  },
  pages: JSON.parse(process.env.pages),
}
